<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="./moduel/three.min.js"></script>
  <body>
    <script src="">
      let camera, scene, renderer;
      let mesh;

      init();
      animate();

      function init() {
        camera = new THREE.PerspectiveCamera(
          70,
          window.innerWidth / window.innerHeight,
          1,
          1000
        );
        camera.position.z = 400;

        scene = new THREE.Scene();

        let geometry = new THREE.PlaneBufferGeometry(300, 300, 1, 1);
        let material = new THREE.MeshBasicMaterial({
          color: 0xff00ff,
          side: THREE.DoubleSide,
        });
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //

        window.addEventListener("resize", onWindowResize, false);
      }

      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
      }

      function animate() {
        requestAnimationFrame(animate);

        //mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;

        renderer.render(scene, camera);
      }
    </script>

    <script type="module">

      let camera, scene, renderer;
      let mesh;

      init();
      animate();

      function init() {
        camera = new THREE.PerspectiveCamera(
          70,
          window.innerWidth / window.innerHeight,
          1,
          1000
        );
        camera.position.z = 400;

        scene = new THREE.Scene();

        let geometry = new THREE.BufferGeometry();
        // create a simple square shape. We duplicate the top left and bottom right
        // vertices because each vertex needs to appear once per triangle.
        let vertices = new Float32Array([
          -100.0, -100.0, 100.0, 100.0, -100.0, 100.0, 100.0, 100.0, 100.0,

          100.0, 100.0, 100.0, -100.0, 100.0, 100.0, -100.0, -100.0, 100.0,
        ]);

        let colors = new Float32Array([
          1, 0, 0, 0, 1, 0, 0, 0, 1,

          0, 0, 1, 1, 1, 1, 1, 0, 0,
        ]);

        // itemSize = 3 because there are 3 values (components) per vertex
        geometry.setAttribute(
          "position",
          new THREE.BufferAttribute(vertices, 3)
        );
        geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
        const material = new THREE.MeshBasicMaterial({
          vertexColors: THREE.VertexColors,
          side: THREE.DoubleSide,
        });
        mesh = new THREE.Mesh(geometry, material);

        scene.add(mesh);

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //

        window.addEventListener("resize", onWindowResize, false);
      }

      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
      }

      function animate() {
        requestAnimationFrame(animate);

        //mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;

        camera.lookAt(scene.position);

        renderer.render(scene, camera);
      }
    </script>
  </body>
</html>
